<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>九宫格（二）demo</title>
	<style>
		#main{
			width: 170px;
			height:170px;
			background: blue;
			margin: 0 auto;
		}
		#main div{
			width: 50px;
			line-height: 50px;
			text-align:center;
			background: #AAA;
			margin:5px 5px 0 0;
		}
		#main a{
			width: 55px;
			line-height: 55px;
			float: left;
			padding: 0 0 5px 5px;
			margin: 0 -5px -5px 0;
			text-decoration: none;
		}
		#main a:hover{
			background: red;
		}
	</style>
</head>
<body>
	<div id="main">
		<a href=""><div>1</div></a>
		<a href=""><div>2</div></a>
		<a href=""><div>3</div></a>
		<a href=""><div>4</div></a>
		<a href=""><div>5</div></a>
		<a href=""><div>6</div></a>
		<a href=""><div>7</div></a>
		<a href=""><div>8</div></a>
		<a href=""><div>9</div></a>
	</div>
</body>
</html>